<template>
  <div class="pageMenu">
       <div :class="['menu-item',router.name==item.path?'cur':'']" v-for="(item,idx) in menu" :key="idx" @click="cur(item.path)">
          <i :class="['iconfont',item.icon]"></i>
          <div class="text">{{item.name}}</div>
       </div>
  </div>
</template>
<script>


export default {
  name:'pageMenu',
  props:['router'],
  data() {
    return {
         menu:[
           {name:'首页',path:'index',icon:'icon-juhe'},
           {name:'网络理政',path:'1',icon:'icon-caozuo'},
           {name:'留言分析',path:'2',icon:'icon-shuju'},
           {name:'留言预警',path:'3',icon:'icon-yujing'},
           {name:'办理排名',path:'4',icon:'icon-paiming'},
           {name:'平台简介',path:'5',icon:'icon-jianjie'},
         ]
    }
  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {
    cur(path){
      this.$emit('checkMenu',path)
    }
  }
}
</script>
<style lang="scss" scoped>

.pageMenu{
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;

  //background-image: linear-gradient(to right, #d3e4ff, #819cd9);
  //-webkit-background-clip: text;

  color: #d3e4ff;
  font-family: "阿里妈妈方圆体 VF Regular";
  .iconfont{
    font-size:28px;
    margin-right:5px;
    &:nth-child(1){
      font-size:22px;
    }
  }
  .menu-item{
    display: flex;
    align-items: center;
    height:40px;
    margin-right:70px;
    cursor: pointer;
    position: relative;
    &:last-child{
      margin-right:0;
    }
    &.cur{
      position: relative;
      z-index: 2;
      >i,>div{
        position: relative;
        z-index: 10;
      }
      &:after{
        position: absolute;
        content:"";
        left:-15px;
        top:0;
        width:140px;
        height:40px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        background: linear-gradient(to right, #819cd9, transparent);
        z-index: -1;
      }
    }
    .text{
      font-weight: bolder;
      font-size:22px;
    }
  }
}
</style>


